<template>
  <el-input :disabled="disabled" v-model="userInfoLabel" clearable />
</template>
<script>
import { useUserStore } from '@/store/modules/user';
export default {
  name: 'UserInfo',
  props: {
    userInfo: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: String,
      default: ''
    },
    format:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      userInfoValue: {},
      dataList: []
    };
  },
  computed: {
    userInfoLabel() {
      if (this.userInfoValue && this.userInfo) {
        const {userId} = this.userInfoValue
        const userInfo = this.userInfoValue[this.userInfo]
        return this.format.replaceAll('userId', userId || '').replaceAll('userInfo', userInfo || '');
      } else {
        return '';
      }
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.userInfoValue = newVal;
        if (!newVal) {
          this.getCurUserInfoValue();
        }
      },
      immediate: true,
      deep: true
    },
    userInfoValue: {
      handler(newVal, oldVal) {
        this.$emit('update:modelValue', newVal);
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async getCurUserInfoValue() {
      const userStore = useUserStore();
      const userInfo = userStore.getUserInfo;
      this.userInfoValue = userInfo;
    }
  }
};
</script>
